<!DOCTYPE html>
<!-- saved from url=(0039)https://docs.jeequan.com/docs/jeepay/ui -->
<html lang="zh-CN" class=" " style=""><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <title>UI规范 - Powered by MinDoc</title>

    
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="renderer" content="webkit">
    <meta name="author" content="Minho">
    <meta name="keywords" content="jeepay文档,xxpay文档,支付系统文档,开源聚合支付系统文档,Jeepay文档,功能开发">
    <meta name="description" content="功能开发-介绍jeepay计全支付系统使用,二次开发部署文档.">

    
    <link href="./UI规范 - Powered by MinDoc_files/bootstrap.min.css" rel="stylesheet">

    <link href="./UI规范 - Powered by MinDoc_files/style.min.css" rel="stylesheet">
    <link href="./UI规范 - Powered by MinDoc_files/font-awesome.min.css" rel="stylesheet">
    <link href="./UI规范 - Powered by MinDoc_files/nprogress.css" rel="stylesheet">
    <link href="./UI规范 - Powered by MinDoc_files/kancloud.css" rel="stylesheet">
    <link href="./UI规范 - Powered by MinDoc_files/jstree.css" rel="stylesheet">
    <link href="./UI规范 - Powered by MinDoc_files/mermaid.css" rel="stylesheet">
    <link href="./UI规范 - Powered by MinDoc_files/sequence-diagram-min.css" rel="stylesheet">
    <link href="./UI规范 - Powered by MinDoc_files/editormd.preview.css" rel="stylesheet">
    <link href="./UI规范 - Powered by MinDoc_files/markdown.preview.css" rel="stylesheet">
    <link href="./UI规范 - Powered by MinDoc_files/github.css" rel="stylesheet">
    <link href="./UI规范 - Powered by MinDoc_files/katex.min.css" rel="stylesheet">
    <link href="./UI规范 - Powered by MinDoc_files/print.css" media="print" rel="stylesheet">

    <script type="text/javascript">window.book={"identify":"jeepay"};</script>
<link rel="stylesheet" href="./UI规范 - Powered by MinDoc_files/layer.css" id="layuicss-skinlayercss"></head>
<body>
<div class="m-manual manual-mode-view manual-reader">
    <header class="navbar navbar-static-top manual-head" role="banner">
        <div class="container-fluid">
            <div class="navbar-header pull-left manual-title">
                <span class="slidebar" id="slidebar"><i class="fa fa-align-justify"></i></span>
                <a href="https://docs.jeequan.com/docs/jeepay" title="Jeepay文档" class="book-title">Jeepay文档</a>
                <span style="font-size: 12px;font-weight: 100;"></span>
            </div>
            <div class="navbar-header pull-right manual-menu">
                <a href="javascript:window.print();" id="printSinglePage" class="btn btn-default" style="margin-right: 10px;"><i class="fa fa-print"></i> 打印</a>
                
                <div class="dropdown pull-right" style="margin-right: 10px;">
                    <a href="https://docs.jeequan.com/" class="btn btn-default"><i class="fa fa-home" aria-hidden="true"></i> 首页</a>
                </div>
                <div class="dropdown pull-right" style="margin-right: 10px;">
                
                
                
                </div>
                
            </div>
        </div>
    </header>
    <article class="container-fluid manual-body">
        <div class="manual-left">
            <div class="manual-tab">
                <div class="tab-navg">
                    <span data-mode="view" class="navg-item active"><i class="fa fa-align-justify"></i><b class="text">目录</b></span>
                    <span data-mode="search" class="navg-item"><i class="fa fa-search"></i><b class="text">搜索</b></span>
                </div>
                <div class="tab-util">
                    <span class="manual-fullscreen-switch">
                        <b class="open fa fa-angle-right" title="展开"></b>
                        <b class="close fa fa-angle-left" title="关闭"></b>
                    </span>
                </div>
                <div class="tab-wrap">
                    <div class="tab-item manual-catalog">
                        <div class="catalog-list read-book-preview jstree jstree-1 jstree-default" id="sidebar" role="tree" tabindex="0" aria-activedescendant="13" aria-busy="false"><ul class="jstree-container-ul jstree-children jstree-wholerow-ul jstree-no-dots" role="group"><li role="treeitem" aria-selected="false" aria-level="1" aria-labelledby="3_anchor" id="3" class="jstree-node  jstree-leaf"><div unselectable="on" role="presentation" class="jstree-wholerow">&nbsp;</div><i class="jstree-icon jstree-ocl" role="presentation"></i><a class="jstree-anchor" href="https://docs.jeequan.com/docs/jeepay/index" tabindex="-1" title="Jeepay" data-version="1636477516" id="3_anchor"><i class="jstree-icon jstree-themeicon jstree-themeicon-hidden" role="presentation"></i>Jeepay</a></li><li role="treeitem" aria-selected="false" aria-level="1" aria-labelledby="4_anchor" aria-expanded="true" id="4" class="jstree-node  jstree-open"><div unselectable="on" role="presentation" class="jstree-wholerow">&nbsp;</div><i class="jstree-icon jstree-ocl" role="presentation"></i><a class="jstree-anchor" href="https://docs.jeequan.com/docs/jeepay/introduction" tabindex="-1" title="系统介绍" data-version="1624871984" id="4_anchor"><i class="jstree-icon jstree-themeicon jstree-themeicon-hidden" role="presentation"></i>系统介绍</a><ul role="group" class="jstree-children"><li role="treeitem" aria-selected="false" aria-level="2" aria-labelledby="5_anchor" id="5" class="jstree-node  jstree-leaf"><div unselectable="on" role="presentation" class="jstree-wholerow">&nbsp;</div><i class="jstree-icon jstree-ocl" role="presentation"></i><a class="jstree-anchor" href="https://docs.jeequan.com/docs/jeepay/framework" tabindex="-1" title="系统架构" data-version="1715132862" id="5_anchor"><i class="jstree-icon jstree-themeicon jstree-themeicon-hidden" role="presentation"></i>系统架构</a></li><li role="treeitem" aria-selected="false" aria-level="2" aria-labelledby="6_anchor" id="6" class="jstree-node  jstree-leaf jstree-last"><div unselectable="on" role="presentation" class="jstree-wholerow">&nbsp;</div><i class="jstree-icon jstree-ocl" role="presentation"></i><a class="jstree-anchor" href="https://docs.jeequan.com/docs/jeepay/function" tabindex="-1" title="功能列表" data-version="1624872022" id="6_anchor"><i class="jstree-icon jstree-themeicon jstree-themeicon-hidden" role="presentation"></i>功能列表</a></li></ul></li><li role="treeitem" aria-selected="false" aria-level="1" aria-labelledby="7_anchor" aria-expanded="true" id="7" class="jstree-node  jstree-open"><div unselectable="on" role="presentation" class="jstree-wholerow">&nbsp;</div><i class="jstree-icon jstree-ocl" role="presentation"></i><a class="jstree-anchor" href="https://docs.jeequan.com/docs/jeepay/develop" tabindex="-1" title="开发部署" data-version="1624872040" id="7_anchor"><i class="jstree-icon jstree-themeicon jstree-themeicon-hidden" role="presentation"></i>开发部署</a><ul role="group" class="jstree-children"><li role="treeitem" aria-selected="false" aria-level="2" aria-labelledby="10_anchor" id="10" class="jstree-node  jstree-leaf"><div unselectable="on" role="presentation" class="jstree-wholerow">&nbsp;</div><i class="jstree-icon jstree-ocl" role="presentation"></i><a class="jstree-anchor" href="https://docs.jeequan.com/docs/jeepay/dev_serv" tabindex="-1" title="功能开发" data-version="1624872069" id="10_anchor"><i class="jstree-icon jstree-themeicon jstree-themeicon-hidden" role="presentation"></i>功能开发</a></li><li role="treeitem" aria-selected="false" aria-level="2" aria-labelledby="11_anchor" id="11" class="jstree-node  jstree-leaf"><div unselectable="on" role="presentation" class="jstree-wholerow">&nbsp;</div><i class="jstree-icon jstree-ocl" role="presentation"></i><a class="jstree-anchor" href="https://docs.jeequan.com/docs/jeepay/dev_channel" tabindex="-1" title="通道对接" data-version="1636345825" id="11_anchor"><i class="jstree-icon jstree-themeicon jstree-themeicon-hidden" role="presentation"></i>通道对接</a></li><li role="treeitem" aria-selected="true" aria-level="2" aria-labelledby="12_anchor" id="12" class="jstree-node  jstree-leaf"><div unselectable="on" role="presentation" class="jstree-wholerow jstree-wholerow-clicked">&nbsp;</div><i class="jstree-icon jstree-ocl" role="presentation"></i><a class="jstree-anchor jstree-clicked" href="https://docs.jeequan.com/docs/jeepay/ui" tabindex="-1" title="UI规范" data-version="1624872087" id="12_anchor"><i class="jstree-icon jstree-themeicon jstree-themeicon-hidden" role="presentation"></i>UI规范</a></li><li role="treeitem" aria-selected="false" aria-level="2" aria-labelledby="13_anchor" id="13" class="jstree-node  jstree-leaf"><div unselectable="on" role="presentation" class="jstree-wholerow jstree-wholerow-hovered">&nbsp;</div><i class="jstree-icon jstree-ocl" role="presentation"></i><a class="jstree-anchor jstree-hovered" href="https://docs.jeequan.com/docs/jeepay/deploy" tabindex="-1" title="部署运行" data-version="1718189984" id="13_anchor"><i class="jstree-icon jstree-themeicon jstree-themeicon-hidden" role="presentation"></i>部署运行</a></li><li role="treeitem" aria-selected="false" aria-level="2" aria-labelledby="75_anchor" id="75" class="jstree-node  jstree-leaf"><div unselectable="on" role="presentation" class="jstree-wholerow">&nbsp;</div><i class="jstree-icon jstree-ocl" role="presentation"></i><a class="jstree-anchor" href="https://docs.jeequan.com/docs/jeepay/jeepay-1d99ciatu11h5" tabindex="-1" title="常见问题" data-version="1703915761" id="75_anchor"><i class="jstree-icon jstree-themeicon jstree-themeicon-hidden" role="presentation"></i>常见问题</a></li><li role="treeitem" aria-selected="false" aria-level="2" aria-labelledby="82_anchor" id="82" class="jstree-node  jstree-leaf"><div unselectable="on" role="presentation" class="jstree-wholerow">&nbsp;</div><i class="jstree-icon jstree-ocl" role="presentation"></i><a class="jstree-anchor" href="https://docs.jeequan.com/docs/jeepay/jeepay-1dbdn8bqgo270" tabindex="-1" title="系统使用" data-version="1666439979" id="82_anchor"><i class="jstree-icon jstree-themeicon jstree-themeicon-hidden" role="presentation"></i>系统使用</a></li><li role="treeitem" aria-selected="false" aria-level="2" aria-labelledby="625_anchor" id="625" class="jstree-node  jstree-leaf"><div unselectable="on" role="presentation" class="jstree-wholerow">&nbsp;</div><i class="jstree-icon jstree-ocl" role="presentation"></i><a class="jstree-anchor" href="https://docs.jeequan.com/docs/jeepay/jeepay-1dtoth2rhr9sj" tabindex="-1" title="支付宝沙箱教程" data-version="1654824191" id="625_anchor"><i class="jstree-icon jstree-themeicon jstree-themeicon-hidden" role="presentation"></i>支付宝沙箱教程</a></li><li role="treeitem" aria-selected="false" aria-level="2" aria-labelledby="634_anchor" id="634" class="jstree-node  jstree-leaf jstree-last"><div unselectable="on" role="presentation" class="jstree-wholerow">&nbsp;</div><i class="jstree-icon jstree-ocl" role="presentation"></i><a class="jstree-anchor" href="https://docs.jeequan.com/docs/jeepay/jeepay-1dvukp7mpq96q" tabindex="-1" title="Docker部署" data-version="1657277771" id="634_anchor"><i class="jstree-icon jstree-themeicon jstree-themeicon-hidden" role="presentation"></i>Docker部署</a></li></ul></li><li role="treeitem" aria-selected="false" aria-level="1" aria-labelledby="669_anchor" aria-expanded="true" id="669" class="jstree-node  jstree-open"><div unselectable="on" role="presentation" class="jstree-wholerow">&nbsp;</div><i class="jstree-icon jstree-ocl" role="presentation"></i><a class="jstree-anchor" href="https://docs.jeequan.com/docs/jeepay/ifstore" tabindex="-1" title="接口市场" data-version="1679201383" id="669_anchor"><i class="jstree-icon jstree-themeicon jstree-themeicon-hidden" role="presentation"></i>接口市场</a><ul role="group" class="jstree-children"><li role="treeitem" aria-selected="false" aria-level="2" aria-labelledby="672_anchor" id="672" class="jstree-node  jstree-leaf jstree-last"><div unselectable="on" role="presentation" class="jstree-wholerow">&nbsp;</div><i class="jstree-icon jstree-ocl" role="presentation"></i><a class="jstree-anchor" href="https://docs.jeequan.com/docs/jeepay/jeepay-1ejdnsuhveb16" tabindex="-1" title="支付接口安装" data-version="1679215111" id="672_anchor"><i class="jstree-icon jstree-themeicon jstree-themeicon-hidden" role="presentation"></i>支付接口安装</a></li></ul></li><li role="treeitem" aria-selected="false" aria-level="1" aria-labelledby="8_anchor" aria-expanded="true" id="8" class="jstree-node  jstree-open"><div unselectable="on" role="presentation" class="jstree-wholerow">&nbsp;</div><i class="jstree-icon jstree-ocl" role="presentation"></i><a class="jstree-anchor" href="https://docs.jeequan.com/docs/jeepay/interface" tabindex="-1" title="接口文档" data-version="1624872115" id="8_anchor"><i class="jstree-icon jstree-themeicon jstree-themeicon-hidden" role="presentation"></i>接口文档</a><ul role="group" class="jstree-children"><li role="treeitem" aria-selected="false" aria-level="2" aria-labelledby="14_anchor" id="14" class="jstree-node  jstree-leaf"><div unselectable="on" role="presentation" class="jstree-wholerow">&nbsp;</div><i class="jstree-icon jstree-ocl" role="presentation"></i><a class="jstree-anchor" href="https://docs.jeequan.com/docs/jeepay/api_rule" tabindex="-1" title="接口规则" data-version="1681101577" id="14_anchor"><i class="jstree-icon jstree-themeicon jstree-themeicon-hidden" role="presentation"></i>接口规则</a></li><li role="treeitem" aria-selected="false" aria-level="2" aria-labelledby="15_anchor" id="15" class="jstree-node  jstree-leaf"><div unselectable="on" role="presentation" class="jstree-wholerow">&nbsp;</div><i class="jstree-icon jstree-ocl" role="presentation"></i><a class="jstree-anchor" href="https://docs.jeequan.com/docs/jeepay/payment_api" tabindex="-1" title="支付接口" data-version="1704857925" id="15_anchor"><i class="jstree-icon jstree-themeicon jstree-themeicon-hidden" role="presentation"></i>支付接口</a></li><li role="treeitem" aria-selected="false" aria-level="2" aria-labelledby="16_anchor" id="16" class="jstree-node  jstree-leaf"><div unselectable="on" role="presentation" class="jstree-wholerow">&nbsp;</div><i class="jstree-icon jstree-ocl" role="presentation"></i><a class="jstree-anchor" href="https://docs.jeequan.com/docs/jeepay/refund_api" tabindex="-1" title="退款接口" data-version="1624872147" id="16_anchor"><i class="jstree-icon jstree-themeicon jstree-themeicon-hidden" role="presentation"></i>退款接口</a></li><li role="treeitem" aria-selected="false" aria-level="2" aria-labelledby="65_anchor" id="65" class="jstree-node  jstree-leaf"><div unselectable="on" role="presentation" class="jstree-wholerow">&nbsp;</div><i class="jstree-icon jstree-ocl" role="presentation"></i><a class="jstree-anchor" href="https://docs.jeequan.com/docs/jeepay/transfer_api" tabindex="-1" title="转账接口" data-version="1629107892" id="65_anchor"><i class="jstree-icon jstree-themeicon jstree-themeicon-hidden" role="presentation"></i>转账接口</a></li><li role="treeitem" aria-selected="false" aria-level="2" aria-labelledby="69_anchor" id="69" class="jstree-node  jstree-leaf jstree-last"><div unselectable="on" role="presentation" class="jstree-wholerow">&nbsp;</div><i class="jstree-icon jstree-ocl" role="presentation"></i><a class="jstree-anchor" href="https://docs.jeequan.com/docs/jeepay/division_api" tabindex="-1" title="分账接口" data-version="1651010086" id="69_anchor"><i class="jstree-icon jstree-themeicon jstree-themeicon-hidden" role="presentation"></i>分账接口</a></li></ul></li><li role="treeitem" aria-selected="false" aria-level="1" aria-labelledby="465_anchor" id="465" class="jstree-node  jstree-leaf"><div unselectable="on" role="presentation" class="jstree-wholerow">&nbsp;</div><i class="jstree-icon jstree-ocl" role="presentation"></i><a class="jstree-anchor" href="https://docs.jeequan.com/docs/jeepay/jeepay-1dg3r7b2remns" tabindex="-1" title="SDK下载" data-version="1678379723" id="465_anchor"><i class="jstree-icon jstree-themeicon jstree-themeicon-hidden" role="presentation"></i>SDK下载</a></li><li role="treeitem" aria-selected="false" aria-level="1" aria-labelledby="9_anchor" id="9" class="jstree-node  jstree-leaf jstree-last"><div unselectable="on" role="presentation" class="jstree-wholerow">&nbsp;</div><i class="jstree-icon jstree-ocl" role="presentation"></i><a class="jstree-anchor" href="https://docs.jeequan.com/docs/jeepay/contact" tabindex="-1" title="联系我们" data-version="1698809527" id="9_anchor"><i class="jstree-icon jstree-themeicon jstree-themeicon-hidden" role="presentation"></i>联系我们</a></li></ul></div>

                    </div>
                    <div class="tab-item manual-search">
                        <div class="search-container">
                            <div class="search-form">
                                <form id="searchForm" action="https://docs.jeequan.com/docs/jeepay/search" method="post">
                                    <div class="form-group">
                                        <input type="search" placeholder="请输入搜索关键字" class="form-control" name="keyword">
                                        <button type="submit" class="btn btn-default btn-search" id="btnSearch">
                                            <i class="fa fa-search"></i>
                                        </button>
                                    </div>
                                </form>
                            </div>
                            <div class="search-result">
                                <div class="search-empty">
                                    <i class="fa fa-search-plus" aria-hidden="true"></i>
                                    <b class="text">暂无相关搜索结果！</b>
                                </div>
                                <ul class="search-list" id="searchList">
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="m-copyright">
                <p>
                    本文档由 <a href="https://www.jeequan.com/" target="_blank">计全科技</a> 发布
                </p>
            </div>
        </div>
        <div class="manual-right">
            <div class="manual-article">
                
                <div class="article-content">
                    <div class="article-body  markdown-body editormd-preview-container" id="page-content"><article class="markdown-article-inner"><div class="markdown-toc editormd-markdown-toc" style="height: 866px;"><ul class="markdown-toc-list"><li class="directory-item"><a class="directory-item-link directory-item-link-1" href="https://docs.jeequan.com/docs/jeepay/ui#e2zpn2" level="1">UI规范</a></li><li class="directory-item"><a class="directory-item-link directory-item-link-2" href="https://docs.jeequan.com/docs/jeepay/ui#9brpye" level="2">前端框架</a></li><li class="directory-item"><a class="directory-item-link directory-item-link-2" href="https://docs.jeequan.com/docs/jeepay/ui#9q2han" level="2">字体</a></li><li class="directory-item"><a class="directory-item-link directory-item-link-2" href="https://docs.jeequan.com/docs/jeepay/ui#eplbfh" level="2">颜色</a></li><li class="directory-item"><a class="directory-item-link directory-item-link-2" href="https://docs.jeequan.com/docs/jeepay/ui#29o8hx" level="2">导航栏&amp;头部</a></li><li class="directory-item"><a class="directory-item-link directory-item-link-2" href="https://docs.jeequan.com/docs/jeepay/ui#kg5p0" level="2">列表</a></li><li class="directory-item"><a class="directory-item-link directory-item-link-2" href="https://docs.jeequan.com/docs/jeepay/ui#2l1odt" level="2">托盘组合&amp;数据可视化</a></li><li class="directory-item"><a class="directory-item-link directory-item-link-2" href="https://docs.jeequan.com/docs/jeepay/ui#ehxx33" level="2">空状态/骨架屏/缺省</a></li><li class="directory-item"><a class="directory-item-link directory-item-link-2" href="https://docs.jeequan.com/docs/jeepay/ui#5jaz31" level="2">抽屉</a></li><li class="directory-item"><a class="directory-item-link directory-item-link-2" href="https://docs.jeequan.com/docs/jeepay/ui#5cg0wu" level="2">滚动条</a></li></ul></div><div class="markdown-article"><h1 id="e2zpn2" class="markdown-heading"><a name="e2zpn2" class="reference-link"></a><span class="header-link octicon octicon-link"></span>UI规范</h1><h2 id="9brpye" class="markdown-heading"><a name="9brpye" class="reference-link"></a><span class="header-link octicon octicon-link"></span>前端框架</h2><p class="line">Jeepay前端开发框架采用Ant design for vue，如需查看更详细的设计语言及组件库文档，请移步至Ant Design Vue组件库和Ant设计语言文档。</p><p class="line">Jeepay后台管理系统是基于Ant Design Pro^Vue^（admin版）开发，如需更详细的文档，请移步至Ant Design Pro^Vue^ 开放文档。</p><h2 id="9q2han" class="markdown-heading"><a name="9q2han" class="reference-link"></a><span class="header-link octicon octicon-link"></span>字体</h2><ul>
<li>为在低分辨率屏幕上小号字体依然能够更清晰的显示，我们没有采用Ant默认的字体家族表，而是将<code>微软雅黑字体</code>的位置提至<code>苹方字体</code>之前。</li></ul><p class="line"><img src="./UI规范 - Powered by MinDoc_files/fontFace.png" title="null" alt="fontFace" layer-index="0"></p><ul>
<li>如需查看或修改字体家族表，请在<code>/src/global.less &gt; body{···}</code>中查看。</li></ul><pre class="hljs css"><code class="language-css"><span class="hljs-selector-tag"><span class="hljs-selector-tag">body</span></span>
{
    <span class="hljs-attribute"><span class="hljs-attribute">font-family</span></span>: -apple-system,BlinkMacSystemFont,Segoe UI,Microsoft YaHei,PingFang SC,Hiragino Sans GB,Helvetica Neue,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
}</code></pre><h2 id="eplbfh" class="markdown-heading"><a name="eplbfh" class="reference-link"></a><span class="header-link octicon octicon-link"></span>颜色</h2><p class="line"><img src="./UI规范 - Powered by MinDoc_files/color.png" title="null" alt="color" layer-index="1"></p><h2 id="29o8hx" class="markdown-heading"><a name="29o8hx" class="reference-link"></a><span class="header-link octicon octicon-link"></span>导航栏&amp;头部</h2><ul>
<li>导航栏默认固定位置，使用浅色版样式。</li><li>header默认不固定位置，可随页面滚动而滚动。</li></ul><p class="line"><img src="./UI规范 - Powered by MinDoc_files/tab.png" title="null" alt="tab" layer-index="2"></p><h2 id="kg5p0" class="markdown-heading"><a name="kg5p0" class="reference-link"></a><span class="header-link octicon octicon-link"></span>列表</h2><ul>
<li>对于信息量较大，数据属性较多的列表，应采用表格形式以在有限的空间内最大化可见数据量。</li><li>表格在Ant默认样式的基础上，去掉了四周的线框，并以卡片样展示，将搜索功能区和数据展示区合并。</li><li>在数据选择上，表格首列均选用了具有较强分辨标识性的数据，例如支付金额、商户名称、用户名称等，并以粗体，黑色展示。若同时可通过点击该列数据中的文字，以打开数据详情的情况下，则文本颜色使用链接色。</li><li>表格中的操作栏最多展示三个操作项，多余的操作将被放置在一个‘更多’的下拉菜单中。</li><li>表格中的状态、类型等数据，会以带有颜色的点、颜色区分标签等方式展示，以更方便的区分这些数据。</li></ul><p class="line"><img src="./UI规范 - Powered by MinDoc_files/table.png" title="null" alt="table" layer-index="3"></p><ul>
<li>对于信息量小、数据属性少、操作项少且需要更强的标识来区分它们的数据列表，应采用卡片形式来展示。</li><li>相对于表格列表，卡片类列表的新增按钮不会单独出现，而是嵌入式的方式放置在每一页数据列表的第一位。</li><li>更具有分辨性的数据卡片列表，将包含不同的颜色、图片等区别属性。</li></ul><p class="line"><img src="./UI规范 - Powered by MinDoc_files/card.png" title="null" alt="card" layer-index="4"></p><h2 id="2l1odt" class="markdown-heading"><a name="2l1odt" class="reference-link"></a><span class="header-link octicon octicon-link"></span>托盘组合&amp;数据可视化</h2><ul>
<li>首页托盘组合采用上下结构，展示问候语、可视化数据等。</li></ul><p class="line"><img src="./UI规范 - Powered by MinDoc_files/pallet.png" title="null" alt="pallet" layer-index="5"></p><ul>
<li>数据可视化方案采用AntV G2 Plot开源可视化数据。</li></ul><p class="line"><img src="./UI规范 - Powered by MinDoc_files/visualization.png" title="null" alt="visualization" layer-index="6"></p><h2 id="ehxx33" class="markdown-heading"><a name="ehxx33" class="reference-link"></a><span class="header-link octicon octicon-link"></span>空状态/骨架屏/缺省</h2><ul>
<li>基于Ant提供的默认方案，我们重制了空状态和缺省页的插图。</li><li>骨架屏和卡片预加载均采用Ant提供的默认方案。</li></ul><p class="line"><img src="./UI规范 - Powered by MinDoc_files/none.png" title="null" alt="none" layer-index="7"></p><h2 id="5jaz31" class="markdown-heading"><a name="5jaz31" class="reference-link"></a><span class="header-link octicon octicon-link"></span>抽屉</h2><ul>
<li>我们将需要对某些数据进行的操作、展示等，均放在了当页弹出的抽屉中。</li><li>若抽屉里的内容是数据详情等仅需要展示，无其他特殊操作，则该抽屉可以通过点击抽屉外的任意位置，以失焦点击来关闭抽屉。</li><li>若抽屉里的内容包含了表单、选择框等操作，为防止意外关闭抽屉而导致填写内容丢失，该抽屉仅可通过点击关闭按钮、取消按钮或保存按钮等来完成抽屉的关闭和保存操作。</li></ul><p class="line"><img src="./UI规范 - Powered by MinDoc_files/drawer.png" title="null" alt="drawer" layer-index="8"></p><h2 id="5cg0wu" class="markdown-heading"><a name="5cg0wu" class="reference-link"></a><span class="header-link octicon octicon-link"></span>滚动条</h2><ul>
<li>我们在浏览器默认滚动条的基础上，对项目内的滚动条做了一些优化，使其在不需要时看起来并没有那么明显。</li></ul><p class="line"><img src="./UI规范 - Powered by MinDoc_files/scrollBar.png" title="null" alt="scrollBar" layer-index="9"></p><div class="wiki-bottom">文档更新时间: 2021-06-28 17:21 &nbsp;&nbsp;作者：大森林</div></div>





















</article></div>
                    
                    <div class="jump-top">
                        <a href="javascript:;" class="view-backtop"><i class="fa fa-arrow-up" aria-hidden="true"></i></a>
                    </div>
                </div>

            </div>
        </div>
        <div class="manual-progress"><b class="progress-bar"></b></div>
    <div id="manual-vsplitbar" unselectable="on" style="z-index: 301; position: absolute; user-select: none; cursor: col-resize; left: 275px; height: 100%; display: block; width: 3px;">                        <a href="javascript:void(0)" accesskey="" tabindex="0" title="vsplitbar"></a>                    </div></article>
    <div class="manual-mask"></div>
</div>


<div class="modal fade" id="downloadBookModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title" id="myModalLabel">项目分享</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-sm-12 text-center" style="padding-bottom: 15px;">
                        <img src="./UI规范 - Powered by MinDoc_files/jeepay.png" alt="扫一扫手机阅读">
                    </div>
                </div>
                <div class="form-group">
                    <label for="password" class="col-sm-2 control-label">项目地址</label>
                    <div class="col-sm-10">
                        <input type="text" value="https://docs.jeequan.com/docs/jeepay" class="form-control" onmouseover="this.select()" id="projectUrl" title="项目地址">
                    </div>
                    <div class="clearfix"></div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

<script src="./UI规范 - Powered by MinDoc_files/jquery.min.js.下载"></script>
<script src="./UI规范 - Powered by MinDoc_files/bootstrap.min.js.下载"></script>
<script src="./UI规范 - Powered by MinDoc_files/jquery.form.js.下载" type="text/javascript"></script>
<script src="./UI规范 - Powered by MinDoc_files/layer.js.下载" type="text/javascript"></script>
<script src="./UI规范 - Powered by MinDoc_files/jstree.min.js.下载" type="text/javascript"></script>
<script src="./UI规范 - Powered by MinDoc_files/nprogress.js.下载" type="text/javascript"></script>
<script src="./UI规范 - Powered by MinDoc_files/highlight.js.下载" type="text/javascript"></script>
<script src="./UI规范 - Powered by MinDoc_files/jquery.highlight.js.下载" type="text/javascript"></script>
<script src="./UI规范 - Powered by MinDoc_files/kancloud.js.下载" type="text/javascript"></script>
<script src="./UI规范 - Powered by MinDoc_files/splitbar.js.下载" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
    $("#searchList").on("click","a",function () {
        var id = $(this).attr("data-id");
        var url = "https:\/\/docs.jeequan.com\/docs\/jeepay\//" + id;
        $(this).parent("li").siblings().find("a").removeClass("active");
        $(this).addClass("active");
        loadDocument(url,id,function (body) {
            return $(body).highlight(window.keyword);
        });
    });
});
</script>


<div id="screenity-ui"><div class="screenity-shadow-dom"><div><div class="screenity-scrollbar"></div><div class="screenity-scrollbar"></div></div><style type="text/css">
			#screenity-ui, #screenity-ui div {
				background-color: unset;
				padding: unset;
				width: unset;
				box-shadow: unset;
				display: unset;
				margin: unset;
				border-radius: unset;
			}
			.screenity-outline {
				position: absolute;
				z-index: 99999999999;
				border: 2px solid #3080F8;
				outline-offset: -2px;
				pointer-events: none;
				border-radius: 5px!important;
			}
		.screenity-blur {
			filter: blur(10px)!important;
		}
			.screenity-shadow-dom * {
				transition: unset;
			}
			.screenity-shadow-dom .TooltipContent {
  border-radius: 30px!important;
	background-color: #29292F!important;
  padding: 10px 15px!important;
  font-size: 12px;
	margin-bottom: 10px!important;
	bottom: 100px;
  line-height: 1;
	font-family: 'Satoshi-Medium', sans-serif;
	z-index: 99999999!important;
  color: #FFF;
  box-shadow: hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px!important;
  user-select: none;
	transition: opacity 0.3 ease-in-out;
  will-change: transform, opacity;
	animation-duration: 400ms;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}

.screenity-shadow-dom .hide-tooltip {
	display: none!important;
}

.screenity-shadow-dom .tooltip-tall {
	margin-bottom: 20px;
}

.screenity-shadow-dom .tooltip-small {
	margin-bottom: 5px;
}

.screenity-shadow-dom .TooltipContent[data-state='delayed-open'][data-side='top'] {
	animation-name: slideDownAndFade;
}
.screenity-shadow-dom .TooltipContent[data-state='delayed-open'][data-side='right'] {
  animation-name: slideLeftAndFade;
}
.screenity-shadow-dom.TooltipContent[data-state='delayed-open'][data-side='bottom'] {
  animation-name: slideUpAndFade;
}
.screenity-shadow-dom.TooltipContent[data-state='delayed-open'][data-side='left'] {
  animation-name: slideRightAndFade;
}

@keyframes slideUpAndFade {
  from {
    opacity: 0;
    transform: translateY(2px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideRightAndFade {
  from {
    opacity: 0;
    transform: translateX(-2px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideDownAndFade {
  from {
    opacity: 0;
    transform: translateY(-2px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideLeftAndFade {
  from {
    opacity: 0;
    transform: translateX(2px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

#screenity-ui [data-radix-popper-content-wrapper] { z-index: 999999999999!important; } 

.screenity-shadow-dom .CanvasContainer {
	position: fixed;
	pointer-events: all!important;
	top: 0px!important;
	left: 0px!important;
	z-index: 99999999999!important;
}
.screenity-shadow-dom .canvas {
	position: fixed;
	top: 0px!important;
	left: 0px!important;
	z-index: 99999999999!important;
	background: transparent!important;
}
.screenity-shadow-dom .canvas-container {
	top: 0px!important;
	left: 0px!important;
	z-index: 99999999999;
	position: fixed!important;
	background: transparent!important;
}

.ScreenityDropdownMenuContent {
	z-index: 99999999999!important;
  min-width: 200px;
  background-color: white;
  margin-top: 4px;
  margin-right: 8px;
  padding-top: 12px;
  padding-bottom: 12px;
  border-radius: 15px;
  z-index: 99999;
  font-family: 'Satoshi-Medium', sans-serif;
  color: #29292F;
  box-shadow: 0px 10px 38px -10px rgba(22, 23, 24, 0.35),
    0px 10px 20px -15px rgba(22, 23, 24, 0.2);
  animation-duration: 400ms;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}
.ScreenityDropdownMenuContent[data-side="top"] {
  animation-name: slideDownAndFade;
}
.ScreenityDropdownMenuContent[data-side="right"] {
  animation-name: slideLeftAndFade;
}
.ScreenityDropdownMenuContent[data-side="bottom"] {
  animation-name: slideUpAndFade;
}
.ScreenityDropdownMenuContent[data-side="left"] {
  animation-name: slideRightAndFade;
}
.ScreenityItemIndicator {
  position: absolute;
  right: 12px; 
  width: 18px;
  height: 18px;
  background: #3080F8;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ScreenityDropdownMenuItem,
.ScreenityDropdownMenuRadioItem {
  font-size: 14px;
  line-height: 1;
  display: flex;
  align-items: center;
  height: 40px;
  padding: 0 5px;
  position: relative;
  padding-left: 22px;
  padding-right: 22px;
  user-select: none;
  outline: none;
}
.ScreenityDropdownMenuItem:hover {
    background-color: #F6F7FB !important;
    cursor: pointer;
}
.ScreenityDropdownMenuItem[data-disabled] {
  color: #6E7684; !important;
  cursor: not-allowed;
  background-color: #F6F7FB !important;
}



@keyframes slideUpAndFade {
  from {
    opacity: 0;
    transform: translateY(2px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideRightAndFade {
  from {
    opacity: 0;
    transform: translateX(-2px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideDownAndFade {
  from {
    opacity: 0;
    transform: translateY(-2px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideLeftAndFade {
  from {
    opacity: 0;
    transform: translateX(2px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

</style></div></div><div class="layui-layer-move"></div></body></html>